<template>
<div class="recommend">
  <scroll :data="recommendList" class="recommend-content" ref="scroll">
    <div>
      <div class="slider-wrapper">
        <Slider>
          <div v-for="item in sliders">
            <a :href="item.linkUrl">
              <img :src="item.picUrl">
            </a>
          </div>
        </Slider>
      </div>

      <div class="recommend-list">
        <h1 class="recommend-title">热门歌曲</h1>
        <ul>
          <li @click="selectItem(item.dissid)" v-for="item in recommendList" class="item">
            <div class="icon">
              <img :src="item.imgurl" width = "60" height="60">
            </div>
            <div class="text">
              <h2 class="name" v-html="item.creator.name"></h2>
              <p class="desc" v-html="item.dissname"></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </scroll>
  <router-view></router-view>
</div>
</template>

<script>
  import Slider from 'base/slide/slide'
  import Scroll from 'base/scroll/scroll'
  import {getRecommend, getDiscList} from 'api/recommend'
  import {ERR_OK} from 'api/conf'
  export default {
    data () {
      return {
        sliders: [
          {
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000001YCZlY3aBifi.jpg'
          },
          {
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000004ckGfg3zaho0.jpg'
          },
          {
            picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M00000236sfA406cmk.jpg'
          }
        ],
        recommendList: [
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          },
          {
            img: 'http://p.qpic.cn/music_cover/2g8aJznERGdXrFRjaqmCHB0KkkcZrwVkfxibWaudvqA1FKhjHJZJUnA/600?n=1',
            title: 'dddddddddcdcdcdcd',
            subTitle: 'ccccccccccccccc'
          }
        ]
      }
    },
    created () {
      this._getRecommend()
      this._getDisList()
    },
    methods: {
      _getRecommend: function () {
        getRecommend().then((res) => {
          if (res.code === ERR_OK) {
            this.sliders = res.data.slider
          }
        })
      },
      _getDisList: function () {
        getDiscList().then((res) => {
          if (res.code === ERR_OK) {
            this.recommendList = res.data.list
          }
        })
      },
      selectItem (item) {
        this.$router.push('/recommend/' + item)
      }
    },
    components: {
      Slider,
      Scroll
    }
  }
</script>

<style scoped lang="stylus">
  @import '~common/stylus/variable'

  .recommend
    .recommend-content
      position fixed
      width 100%
      top 90px
      bottom 0
      overflow hidden
      .recommend-list
        .recommend-title
          color $color-theme
          padding 5px
        .item
          display flex
          align-items center
          padding 0 20px 20px 20px
          .icon
            width 60px
            padding-right 20px
          .text
            display flex
            flex-direction column
            justify-content center
            line-height 20px
            flex 1
            font-size $font-size-medium-x
            overflow hidden
            text-align left
            .name
              margin-bottom 10px
              color $color-text
            .desc
              color $color-text-d

</style>
